<template>
	<view class="">
		<view class="Fonttextbox louis-padding-lf-0 louis-relative">
			<view class="Fonttext louis-font-pixel louis-absolute ">
				字 体
			</view>
			<louis-back>

			</louis-back>
			<image class="louis-w-max " src="http://zons.oss-cn-shenzhen.aliyuncs.com/941bc39e325783b6c7f29503ee4978992c477ed4.gif"
			 mode="widthFix"></image>
		</view>



		<view class="font">
			<view class="Basics Basicsred" color="#fff">
				<view class="louis-font-25 louis-text-center">

					<text class="louis-font-25 ">
						class="louis-大小"
					</text>
				</view>
			</view>
			<view class="Basics" color="#fff">

				<view class="louis-flex-between     louis-color-fff  louis-margin-tb-2">
					<view class="">

						<view class="louis-15px ">louis-20px</view>
					</view>
					<view class="">

						<view class="louis-30rpx">louis-30rpx</view>
					</view>
				</view>

			</view>
		</view>




		<view class="font">

			<view class="Basics Basicsred" color="#fff">
				<view class="louis-font-25 louis-text-center">
					class="louis-font-位置"
				</view>
			</view>
			<view class="Basics" color="#fff">
				<view class="louis-font-25">
					<!-- <view class="louis-text-left ">louis-text-left</view> -->
					<view class="louis-font-left ">louis-font-left</view>
					<!-- <view class="louis-text-center ">louis-text-center</view> -->
					<view class="louis-text-center ">louis-font-center</view>
					<!-- <view class="louis-text-right ">louis-text-right</view> -->
					<view class="louis-text-right ">louis-font-right</view>
				</view>
			</view>
		</view>

		<view class="font">

			<view class="Basics Basicsred" color="#fff">
				<view class="louis-font-25 louis-text-center">

					<text class="louis-font-25 ">
						class="louis-font-粗细"
					</text>
				</view>
			</view>
			<view class="Basics" color="#fff">
				<view class="louis-space-between louis-color-fff louis-font-25">
					<view class=" louis-font-L">louis-font-L</view>
					<view class=" louis-font-N">louis-font-N</view>
					<view class=" louis-font-B">louis-font-B</view>

				</view>
			</view>
		</view>

		<view class="font">

			<view class="Basics Basicsred" color="#fff">
				<view class="louis-font-25 louis-text-center">

					<text class="louis-font-25 ">
						class="louis-font-风格"
					</text>
				</view>
			</view>
			<view @tap="fontstyle=!fontstyle" class="Basics" color="#fff">

				<view class="louis-text-I">louis-text-I </view>
				<view class="louis-text-underline">louis-text-underline </view>
				<view v-if="fontstyle" class="">
					<view class="louis-text-line-through louis-m-tb-10 louis-space-between">
						<text>louis-text-line-through </text>
						<text>定义穿过文本下的一条线</text>
					</view>

					<view class="louis-text-overline louis-m-tb-10 louis-space-between"><text>louis-text-overline </text><text>定义文本上的一条线</text></view>
					<view class="louis-padding-top-10 louis-m-tb-10 louis-space-between"></view>
					<view class="louis-text-overline-dotted louis-m-tb-10 louis-space-between"><text>louis-text-overline-dotted </text><text>上虚线</text></view>
					<view class="louis-text-underline-dotted louis-m-tb-10 louis-space-between"><text>louis-text-underline-dotted
						</text><text>下虚线</text></view>
					<view class="louis-padding-top-10 "></view>
					<view class="louis-text-overline-wavy louis-m-tb-10 louis-space-between"><text>louis-text-overline-wavy </text><text>上波浪</text></view>
					<view class="louis-text-underline-wavy louis-m-tb-10 louis-space-between"><text>louis-text-underline-wavy</text><text>下波浪</text></view>
				</view>
				<view  class="louis-margin-top-10rpx louis-flex-center">
					<text v-if="fontstyle==false">
						查看更多
					</text>
					<text v-else>
						收起
					</text>
				</view>

			</view>
		</view>
		<view class="font">

			<view class="Basics Basicsred" color="#fff">
				<view class="louis-font-25 louis-text-center">

					<text class="louis-font-25 ">
						class="louis-font-字形"
					</text>
				</view>
			</view>
			<view class="Basics louis-space-between" color="#fff">

				<view class="louis-font-uppercase">uppercase </view>
				<view class="louis-font-capitalize">capitalize </view>
				<view class="louis-font-lowercase">lowercase </view>

			</view>
		</view>



		<view class="font">

			<view class="Basics Basicsred" color="#fff">
				<view class="louis-font-25 louis-text-center">

					<text class="louis-font-25 ">
						class="louis-font-ellipsis-行数"
					</text>
				</view>
			</view>
			<view class="Basics louis-font-ellipsis" color="#fff">
				你在我耳边低声的细语，触及的不是我的耳朵而是心灵；而你亲吻的不是我的嘴唇而是灵魂。
			</view>
			<view class="Basics  " color="#fff">

				<view class="louis-font-ellipsis-2">
					你在我耳边低声的细语，触及的不是我的耳朵而是心灵；而你亲吻的不是我的嘴唇而是灵魂。有一天，一个人突然走进了你的生活，令人惊奇的是第二天，你不敢想象没有他会怎样。
				</view>

			</view>
			<view class="Basics louis-font-ellipsis-3" color="#fff">
				<view class="louis-font-ellipsis-3">
					你在我耳边低声的细语，触及的不是我的耳朵而是心灵；而你亲吻的不是我的嘴唇而是灵魂。有一天，一个人突然走进了你的生活，令人惊奇的是第二天，你不敢想象没有她会怎样。当我和你在一起的时候，我不再需要外套的温暖和台灯的光亮；因为你就像烈火般的温暖和明亮。
				</view>
			</view>
			 <louis-view p="20rpx">
			
		</louis-view>
		</view>

	</view>
</template>

<style scoped lang="less">
	.Fonttextbox {
		// height: 4000rpx;
		overflow: hidden;

	}

	.Fonttext {
		// -webkit-text-stroke: 1px #6893a0;
		position: absolute;
		z-index: 200;
		color: rgba(255, 255, 255, 0.5);
		width: 100%;
		height: 100%;
		top: 350rpx;
		right: 10rpx;
		width: 200rpx;
		font-size: 48rpx;
		transform: skewX(25deg);
		// color: black;
	}

	.Basics {
		color: #FFF;
		font-size: 25rpx;
		margin-bottom: 10rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		border: 2px solid #C0C0C0;
		box-sizing: border-box;
		background-color: rgba(29, 5, 41, 0.8);
		padding-top: 15rpx;
		padding-bottom: 20rpx;

		&:active {
			background-color: rgba(206, 31, 84, 0.8);
		}
	}

	.Basicsred {
		background-color: rgba(206, 31, 84, 0.6);
	}

	.font {
		margin-top: 20rpx;
	}
</style>





<script>
	export default {
		data() {
			return {
				fontstyle: false,
				morecolor: false,



			};
		},
		mounted() {

		},
		methods: {

		}
	}
</script>
